<template>
	<div class="wrapper">
		<el-container>
			<el-header class="header_ex" style="padding:0">
				<el-menu :default-active="onRoutes" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64"
				 text-color="#fff" active-text-color="#ffd04b" unique-opened router>
					<template v-for="item in items">
						<template v-if="item.subs">
							<el-submenu :index="item.index" :key="item.index">
								<template slot="title">
									<i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
								</template>
								<template v-for="subItem in item.subs">
									<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
										<template slot="title">{{ subItem.title }}</template>
										<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">
											{{ threeItem.title }}
										</el-menu-item>
									</el-submenu>
									<el-menu-item v-else :index="subItem.index" :key="subItem.index">
										{{ subItem.title }}
									</el-menu-item>
								</template>
							</el-submenu>
						</template>
						<template v-else>
							<el-menu-item :index="item.index" :key="item.index">
								<i :class="item.icon"></i><span slot="title">{{ item.title }}</span>
							</el-menu-item>
						</template>
					</template>

				</el-menu>
			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import vTags from './Tags.vue';
	import bus from './bus';
	export default {
		data() {
			return {
				activeIndex: '1',
				activeIndex2: '1',
				tagsList: [],
				collapse: false,
				items: [{
						icon: 'el-icon-lx-home',
						index: 'ToolsIndex',
						title: '首页'
					},
					{
						icon: 'el-icon-lx-read',
						index: 'QRcodeGeneration',
						title: '条码/二维码生成'
					},
					{
						icon: 'el-icon-sort',
						index: 'codeTo',
						title: '字符处理',
						subs: [{
							index: 'WordsNumber',
							title: '字数统计'
						}, {
							index: 'Base64Encoding',
							title: 'Base64编码/解码'
						}, {
							index: 'NumMoney',
							title: '数字转大写金额'
						}]
					},
					{
						icon: 'el-icon-message',
						index: 'note_Chapter',
						title: '密码加密',
						subs: [{
							index: 'Md5Encryption',
							title: 'MD5加密'
						}]
					},
					{
						icon: 'el-icon-menu',
						index: 'CodeFormat',
						title: '代码格式整理',
						subs: [{
								index: 'SqlCodeFormat',
								title: 'SQL代码格式化',
							},
							{
								icon: 'el-icon-menu',
								index: 'JsonCodeFormat',
								title: 'JSON格式化'
							}
						]
					}
				],
			}
		},
		components: {},
		created() {
			// 			bus.$on('collapse', msg => {
			// 				this.collapse = msg;
			// 			})
			// 
			// 			// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
			// 			bus.$on('tags', msg => {
			// 				let arr = [];
			// 				for (let i = 0, len = msg.length; i < len; i++) {
			// 					msg[i].name && arr.push(msg[i].name);
			// 				}
			// 				this.tagsList = arr;
			// 			})
		},
		methods: {
			handleSelect(key, keyPath) {
				console.log(key, keyPath);
			}
		},
		computed: {
			onRoutes() {
				return this.$route.path.replace('/', '');
			}
		}
	}
</script>
<style>
	.header_ex {
		padding: 0;
	}

	.el-header {
		background-color: #545c64;
		padding: 60;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-ms-flex-negative: 0;
		flex-shrink: 0;
	}

	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #D3DCE6;
		color: #333;
		text-align: center;
		line-height: 200px;
	}

	/* 	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 700px;
	} */

	body>.el-container {
		margin-bottom: 40px;
	}

	.el-container:nth-child(5) .el-aside,
	.el-container:nth-child(6) .el-aside {
		line-height: 260px;
	}

	.el-container:nth-child(7) .el-aside {
		line-height: 320px;
	}
</style>
